<div class="info">
	<div class="item-content">
		Component Reposition plugin helps you to position one component with respect to another component. You can position the component
		using any of the 8 positions (see api) allowed. Additionally, you can also provide margins to be applied to the repositioned component.
	</div>

	<div class="item-content-info">
		<div class="info-item">
			API:<br/>
			-<span class="indent4px">reposition(relativeTo, pos, margins) - returns a jQuery object for chainability.</span>
		</div>
		
		<table class="indent4px info-item">
			<tr valign="top">
				<th>Parameter</th>
				<th class="nowrap">Parameter Type</th>
				<th class="nowrap">Default Value</th>
				<th>Description</th>
			</tr>
			<tr valign="top">
				<td>relativeTo<span class="mandatory">*</span></td>
				<td class="nowrap">jQuery Object / String</td>
				<td class="nowrap">-</td>
				<td>This argument is mandatory. It can be any CSS selector (example - '#relativeTo'/'.relativeTo') or you could simply pass
				in the jQuery object of the relativeTo component.</td>
			</tr>
			<tr valign="top">
				<td>pos</td>
				<td>String</td>
				<td class="nowrap">top</td>
				<td>This argument is optional, if nothing is passed then 'top' position is taken as the default. However, it can have the 
				following values 'top' / 'right' / 'bottom' / 'left' / 'top-right' / 'bottom-right' / 'bottom-left' / 'top-left'.</td>
			</tr>
			<tr valign="top">
				<td>margins</td>
				<td>Array</td>
				<td class="nowrap">null</td>
				<td>This argument is optional, nothing happens if it is not passed. However, you need to pass the margins as per the CSS rules.
				For instance it can be [20,10,-10,-20] where it will be interpreted as 20px top-margin, 10px right-margin, -10px bottom-margin,
				-20px left-margin.</td>
			</tr>
		</table>
		
		<div class="info-item">
			Usage:&nbsp;<span class="demo x-componentReposition">Demo</span><br/>
			-<span class="indent4px">$( '#cmp1' ).reposition('#cmp2', 'top-right', [20,0,0,-20])</span>
		</div>
		
		<div class="info-item">
			Download:<br/>
			-<span class="indent4px"><a href="ComponentReposition/plugin/component-reposition-plugin.js" target="_blank">
			component-reposition-plugin.js</a></span>
		</div>
		
		<div class="info-item">
			Tags:<br/>
			-<span class="indent4px">jQuery extension</span>
		</div>
	</div>
</div>